import React,{Component} from 'react';
import Logo from '../../components/logo/logo'
import { 
  Button,
  NavBar,
  WingBlank,
  List,
  InputItem,
  WhiteSpace,
} from 'antd-mobile';
import {connect} from 'react-redux'
import {login} from '../../redux/actions'
import {Redirect} from 'react-router-dom'


class Login extends Component{
  state={
    username:'',
    password:'',
  }
  login=()=>{
    this.props.login(this.state)
  }

  handleChange=(name,val)=>{
    this.setState({
      [name] : val
    })
  }
  toRegister=()=>{
    this.props.history.replace('/register')
  }
 render() {
  const {msg,toRedirect}=this.props.user
  if(toRedirect){
    return <Redirect to={toRedirect}></Redirect>
  }
  return (
    <div>
      <NavBar> BOSS&nbsp;直&nbsp;聘 </NavBar>
      <Logo></Logo>
      <WingBlank>
        <List>
        {msg?<div className='error-msg'>{msg}</div>:null}
        <InputItem placeholder='请输入用户名' onChange={val =>{this.handleChange('username',val)}}>用户名:</InputItem>
          <WhiteSpace/>
          <InputItem placeholder='请输入密码' type='password' onChange={val =>{this.handleChange('password',val)}}>密&nbsp;码:</InputItem>
          <WhiteSpace/>
          <Button type='primary' onClick={this.login}>登录</Button>
          <WhiteSpace/>
          <Button onClick={this.toRegister}>注册账户</Button>
        </List>
      </WingBlank>
    </div>
  );
  }
}
export default connect(
  state => ({user: state.user}),
  {login}
)(Login)
